<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>职位页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/job.css">

    <script src="./jquery-3.6.0.js"></script>

</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span class="now" id="current">职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>

                <li id="app"><a href="./APP.html"><span>APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
                <!-- <li id="find"><a href=""><span>发现</span></a></li> -->

                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>
            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <div class="search">
        <div class="search-one">
            <span id="shanghai">上海：|</span>
            <!-- 遮罩层 -->
            <div id="screen"></div>
            <!-- 弹出层 -->
            <section id="login">
                <div>
                    <h1>请选择热门城市 <span>X</span></h1>
                    <div class="login-city-list">
                        <span data-cityIndex="0" class="cur">热门城市</span>
                        <span data-cityIndex="1">ABCDE</span>
                        <span data-cityIndex="2">FGHJ</span>
                        <span data-cityIndex="3">KLMN</span>
                        <span data-cityIndex="4">PQRST</span>
                        <span data-cityIndex="5">WXYZ</span>
                    </div>
                </div>
                <div class="login-city-content">
                    <ul>

                    </ul>
                </div>


            </section>
            <input type="text" value="" placeholder=" 搜索职位、公司">
            <span>职位类型|</span>
            <span>公司行业|</span>
            <button>搜索</button>
        </div>
        <div class="search-two">
            <span>->登录查看更多职位</span>
        </div>
    </div>
    <div class="city">
        <p class="hot-city">
            <span>上海</span>
            <span>&gt;</span>
            <span style="color: tomato;">不限</span>
            <span>&gt;</span>
            <span>热门城市:</span>
            <span class="quanguo">全国</span>
            <span>北京</span>
            <span>上海</span>
            <span>广州</span>
            <span>深圳</span>
            <span>杭州</span>
            <span>天津</span>
            <span>西安</span>
            <span>苏州</span>
            <span>武汉</span>
            <span>厦门</span>
            <span>长沙</span>
            <span>成都</span>
            <span>郑州</span>
            <span>重庆</span>
            <span>全部城市</span>
        </p>

        <p class="other-city">
            <span style="color: tomato;">不限</span>
            <span>浦东新区</span>
            <span>闵行区</span>
            <span>徐汇区</span>
            <span>静安区</span>
            <span>杨浦区</span>
            <span>长宁区</span>
            <span>嘉定区</span>
            <span>普陀区</span>
            <span>黄浦区</span>
            <span>松江区</span>
            <span>宝山区</span>
            <span>青浦区</span>
            <span>虹口区</span>
            <span>奉贤区</span>
            <span>金山区</span>
            <span>崇明区</span>
        </p>
        <p class="request">
            <span>工作经验</span>
            <!-- <i class="tri"></i> -->
            <span>学历要求</span>
            <!-- <i class="tri"></i> -->
            <span>薪资要求</span>
            <!-- <i class="tri"></i> -->
            <span>融资阶段</span>
            <!-- <i class="tri"></i> -->
            <span>公司规模</span>
            <!-- <i class="tri"></i> -->
            <i>清空筛选条件</i>
        </p>
    </div>

    <!-- 设置核心内容 -->
    <main id="main">

        <section id="job-box">
            <!-- 左边部分 -->
            <ul id="job-box-ul">
                <!-- 每个li是一层 -->
                <li>
                    <div class="job-primary">
                        <!-- 上边部分 -->
                        <div class="info-primary">
                            <!-- 上-左 -->
                            <div class="info-primary-left  primary-wrapper">
                                <div>
                                    <div class="job-title">
                                        <div class="job-name">
                                            到餐-前端负责人
                                        </div>
                                        <div class="job-area">
                                            [上海·长宁区·北新泾]
                                        </div>
                                    </div>
                                    <div class="job-limit">
                                        <span>50-55K</span>
                                        <span>
                                            5-10年
                                            <em class="vline"></em>
                                            本科
                                        </span>
                                        <div class="info-publis">
                                            <h3 class="name">
                                                <img src="./img/job/chat.png" alt="" class="icon-chat">
                                                杨女士
                                                <em class="vline"></em>
                                                招聘者
                                            </h3>
                                        </div>
                                        <!-- 鼠标滑过杨女士 显示Button else隐藏 -->
                                        <button id="button-hide">
                                            <img src="./img/job/icon-chat-hover.png" alt="">
                                            <span>立即沟通</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- 上-右 -->
                            <div class="info-primary-right info-company">
                                <div class="company-text">
                                    <h3 class="name">美团</h3>
                                    <p>
                                        <span>互联网</span>
                                        <em class="vline"></em>
                                        <span>已上市</span>
                                        <em class="vline"></em>
                                        <span>10000人以上</span>
                                        <em class="vline"></em>
                                    </p>
                                </div>
                                <div>
                                    <img src="./img/job/美团.jpg" alt="">
                                </div>
                            </div>
                        </div>
                        <!-- 下边部分 -->
                        <div class="info-append">
                            <div class="tags">
                                <span class="tag-item">前端开发</span>
                                <span class="tag-item">React</span>
                            </div>
                            <div class="info-desc">
                                五险一金，年终奖，节日福利，带薪年假，全勤奖，补充医疗保险，交通补助，定期体检，六险一金
                            </div>
                        </div>
                    </div>

                </li>

            </ul>
            <!-- 右边部分 -->
            <div class="sign-form">
                <!-- form表单 -->
                <form action="#">
                    <h2>各大行业职位任你选</h2>
                    <p>
                        <span><img src="./img/job/手机.svg" alt=""></span>
                        <span><em>+86</em></span>
                        <span><img src="./img/job/下箭头.svg" alt=""></span>
                        <span><input type="text" placeholder="手机号"></span>
                    </p>
                    <p>
                        <span> <img src="./img/job/短信.svg" alt=""></span>
                        <span><input type="text" placeholder="短信验证码  |发送验证码"></span>
                    </p>
                    <p>
                        <input type="submit" name="" id="" value="登录/注册">
                    </p>
                    <b>
                        <input type="text">
                        同意BOSS直聘 《用户协议》 《个人信息保护政策》
                    </b>
                </form>
                <!-- 上传简历一键注册部分 -->
                <div class="resume-submit">
                    <a href="">上传简历一键注册</a>
                </div>
                <div class="job-list">
                    <h3>看过的职位</h3>
                    <ul>
                        <li>
                            <a href="">
                                <h4 class="job-noney">

                                    <span class="jobname">前端工程师（React） </span>
                                    <span class="salary">25-30K</span>
                                </h4>
                                <p class="company-name">乐言科技</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h4 class="job-noney">

                                    <span class="jobname">vcc商务经理 </span>
                                    <span class="salary">20-35K</span>
                                </h4>
                                <p class="company-name">携程集团</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h4 class="job-noney">

                                    <span class="jobname">前端开发工程师 </span>
                                    <span class="salary">25-30K</span>
                                </h4>
                                <p class="company-name">重定向</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h4 class="job-noney">

                                    <span class="jobname">前端开发工程师 </span>
                                    <span class="salary">3-7K·13薪</span>
                                </h4>
                                <p class="company-name">新航物联网</p>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <h4 class="job-noney">

                                    <span class="jobname">图像处理/机器学习工程师</span>
                                    <span class="salary">25-30K</span>
                                </h4>
                                <p class="company-name">携程集团</p>
                            </a>
                        </li>
                    </ul>
                </div>

                <div id="image">
                    <ul class="image-img">
                        <li><img src="./img/job/下载app.png" alt=""></li>
                        <li><img src="./img/job/优质人才.png" alt=""></li>
                        <li><img src="./img/job/薪酬查询.jpg" alt=""></li>
                    </ul>

                </div>
            </div>

        </section>


    </main>

    <div class="footer">
        <div class="footer-inner">
            <div class="inner-top">
                <ul class="one">
                    <li id="first">企业服务</li>
                    <li>职位搜索</li>
                    <li>新闻资讯</li>
                    <li>BOSS直聘APP</li>
                    <li>投资者关系</li>
                </ul>
                <ul class="one">
                    <li id="first">使用与帮助</li>
                    <li>协议与规则</li>
                    <li>个人信息保护政策</li>
                    <li>防骗指南</li>
                    <li>使用帮助</li>
                </ul>
                <ul class="one">
                    <li id="first">练习BOSS直聘</li>
                    <li>北京华品博睿网络技术有限公司</li>
                    <li>公司地址 北京市朝阳区太阳宫中路16号院1号楼18层1801内09</li>
                    <li>违法和不良信息举报邮箱/未成年人举报渠道 jubao@kanzhun.com</li>

                </ul>
                <ul class="one">
                    <li id="first">
                        <img src="https://static.zhipin.com/v2/web/geek/images/footer-logo.png" alt="">
                    </li>
                    <li>企业服务热线和举报投诉/未成年人举报渠道 </li>
                    <li>公司地址 老年人直连热线</li>
                    <li>工作日 8:00 - 22:00</li>
                    <li>休息日 9:30 - 18:30</li>
                </ul>
            </div>
            <div class="inner-bottom">
                <div class="left">
                    <div class="inner-bottom-left">
                        <span>Copyright © 2022 BOSS直聘</span>
                        <span>京ICP备14013441号-5</span>
                        <span>京ICP证150923号</span>
                        <span>京网文[2020]0399-066 号</span>
                        <span> <img src="	https://static.zhipin.com/v2/web/geek/images/icon-badge-1.png" alt="">
                            电子营业执照</span>
                        <span><img src="	https://static.zhipin.com/v2/web/geek/images/icon-beian.png" alt="">
                            京公网安备11010502032801</span>
                    </div>
                    <div class="inner-bottom-right">
                        <span>朝阳警力</span>
                        <span>人力资源服务许可证</span>
                        <span>网上有害信息举报专区</span>
                        <span>朝阳区人社局监督电话</span>
                    </div>
                </div>
                <div class="right">
                    <a href="https://www.weibo.com/bosszhipin" target="_blank" class="weibo">
                        <img src="./img/turtle/微博.svg" alt="">
                    </a>
                    <a href="#" class="weixin">
                        <img src="./img/turtle/微信.svg" alt="">
                    </a>
                    <a href="#" class="app">
                        <img src="./img/turtle/app.svg" alt="">
                    </a>
                    <a href="" class="icon-client-app">
                        <img src="https://img.bosszhipin.com/static/file/2021/dppx09luaq1637052502211.png" alt="">
                    </a>
                </div>
            </div>
        </div>
        <p>
            <span>友情链接</span>
            <span>看准网</span>
        </p>
    </div>

    <!-- 弹出部分 的样式 -->
    <div class="tanchutop">
        <div class="top-search">
            <div class="logo">
                <img src="https://static.zhipin.com/zhipin-geek/v490/web/geek/images/logo-2x.png" alt="">
            </div>
            <div class="top-center">
                <span>职位类型:</span>
                <input type="text" placeholder="搜索职位、公司">
                <button>搜索</button>
            </div>

            <div class="top-right">
                <input type="text" name="" id="" placeholder="输入手机号">
                <input type="text" placeholder="验证码        获取">
                <button>登录注册</button>
            </div>
        </div>

    </div>
    <script>


        // 监听屏幕滚动到一定位置的时候，出现顶部 固定样式
        window.addEventListener('scroll', function () {
            // console.log(document.documentElement.scrollTop);
            var num = document.documentElement.scrollTop / 100
            var num1 = Math.ceil(num)
            if (num1 >= 2) {
                $('.tanchutop').show().css({
                    position: 'fixed',
                    top: '0'
                })
            } else if (num1 < 2) {
                $('.tanchutop').hide()
            }
        })



        $(window).ready(function () {
            let str = ''

            $.ajax({
                type: 'get',
                url: '/getAllJob',
                dataType: 'json'
            }).done((data) => {

                console.log(data);
                console.log(data.job);
                // data.job 得到的是    json里的 job对象

                // job对象里有个数组      jobList  数组里面是一个个对象

                console.log(data.job.jobList);
                let dataJob = data.job.jobList
                let str = ''
                dataJob.forEach((value, index) => {
                    // value   是数组里的每一个对象   打点取值
                    // console.log(value);
                    // console.log(value.jobName);
                    str += `
                    <li>
                    <div class="job-primary">
                        <div class="info-primary">
                            <div class="info-primary-left  primary-wrapper">
                                <div>
                                    <div class="job-title">
                                        <div class="job-name">
                                            ${value.jobName}
                                        </div>
                                        <div class="job-area">
                                            ${value.city}
                                        </div>
                                    </div>
                                    <div class="job-limit">
                                        <span>${value.money}</span>
                                        <span>
                                            ${value.jobTime}
                                            <em class="vline"></em>
                                            ${value.shoolLevel}
                                        </span>
                                        <div class="info-publis">
                                            <h3 class="name">
                                                <img src="./img/job/chat.png" alt="" class="icon-chat">
                                                ${value.hr}
                                                <em class="vline"></em>
                                                ${value.degree}
                                            </h3>
                                        </div>
                                        <button  id="button-hide">
                                            <img src="./img/job/icon-chat-hover.png" alt="">
                                            <span>立即沟通</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- 上-右 -->
                            <div class="info-primary-right info-company">
                                <div class="company-text">
                                    <h3 class="name"> ${value.companyName}</h3>
                                    <p>
                                        <span> ${value.trade}</span>
                                        <em class="vline"></em>
                                        <span> ${value.level}</span>
                                        <em class="vline"></em>
                                        <span> ${value.people}</span>
                                        <em class="vline"></em>
                                    </p>
                                </div>
                                <div>
                                    <img src="${value.src}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="info-append">
                            <div class="tags">
                                <span class="tag-item">${value.list1}</span>
                                <span class="tag-item">${value.list2}</span>
                            </div>
                            <div class="info-desc">
                                ${value.weal}
                            </div>
                        </div>
                    </div>
                </li>
                    
                    
                    `
                })

                $('#main #job-box #job-box-ul').html(str)
            }).fail((err) => {
                console.log(err);
            })
        })

        // 鼠标滑动到 切换隐藏  立即沟通

        $('#main #job-box #job-box-ul').on('mouseover', '.name', () => {
            // console.log(111);
            // console.log($('.info-publis'));
            // console.log($('#button-hide'));
            $('.name').hide()
            $('#button-hide').show()
        })

        $('#main #job-box #job-box-ul').on('mouseout', '.name', () => {
            $('.name').show()
            $('#button-hide').hide()
            console.log(333);
        })


        //弹出层和遮罩层代码
        $('#shanghai').click(() => {
            $('#screen').fadeIn(500).css({
                position: "fixed",
                top: 0
            })
            $('#login').fadeIn(500).css({
                position: "fixed",
                top: 0
            })
            document.documentElement.style.overflow = 'scroll'
            // 设置登录模块居住
            loginCenter()

            // 设置遮罩层居中
            getScreenWH()


            // 进行数据渲染
            let str = ''
            $.ajax({
                type: 'get',
                url: '/getCity',
                dataType: 'json'
            }).done((data) => {
                // console.log(222);
                // console.log(data);
                // console.log(data.zpData.hotCityList[0].name);
                let city = data.zpData.hotCityList
                console.log(city);

                city.forEach((item, index) => {
                    // console.log(item);
                    // console.log(index);
                    str += `
                        <li  data-index=${index}>
                            <span>${item.name}</span>
                        </li>
                    `
                });
                // console.log(str);
                $('.login-city-content ul').html(str)
                $('.login-city-content ul').on('click', 'li', function () {
                    // console.log($(this).index());
                    let i = $(this).index()
                    $('#shanghai').text(city[i].name)

                })
            }).fail((err) => {
                console.log(err);
            })


            // 点击ABCDE下面内容进行切换
            $('.login-city-list span').click(function () {


                console.log();

                $(this).prev().removeClass('cur')
                $(this).addClass('cur')

                $.ajax({
                    type: "get",
                    url: "/getCity1",
                    dataType: "json"
                }).done((data) => {
                    let a = $(this).text()

                    let b = a.toLowerCase()

                    let strHtml = ''
                    for (let x = 0; x < b.length; x++) {
                        strHtml += `
                        <div class='login-city-content1'>
                            <div class='bx'>${b[x]}</div>
                            <ul>`
                        // console.log(data.zpData.cityList);
                        let cityList = data.zpData.cityList
                        cityList.forEach((item, value) => {
                            // console.log(item);
                            // console.log(item.subLevelModelList);
                            item.subLevelModelList.forEach((item1, index) => {
                                // console.log(item1.firstChar);
                                if (b[x] == item1.firstChar) {
                                    strHtml += `
                                        <li data-li="${index}">
                                            <span>${item1.name}</span>
                                        </li>                          
                                    `
                                }
                            })
                        })
                        strHtml += `         
                            </ul>
                        </div>
                        `
                    }
                    console.log(strHtml);
                    $('.login-city-content ul').html(strHtml)
                    $('.login-city-content1 ul ').on('click', 'li', function () {
                        // console.log($(this).index());
                        let i = $(this).index()
                        $('#shanghai').text(city[i].name)
                    })
                })
            })
        })

        /*****_____________搜索事件______________________*/



        var input = document.querySelector('.search .search-one input')

        let htmStr = ''
        input.onchange = function () {
            // 获取input 框输入的值
            console.log(this.value);
            show(this.value);
        }
        // const key = '路'
        function show(key) {
            let htmlStr = ''

            $.ajax({
                type: 'get',
                url: '/getAllJob',
                dataType: 'json'
            }).done((data) => {

                console.log(data);
                console.log(data.job);
                // data.job 得到的是    json里的 job对象
                // job对象里有个数组      jobList  数组里面是一个个对象
                console.log(data.job.jobList);
                let dataJob = data.job.jobList
                let str = ''
                dataJob.map((v, index) => {
                    // 找title   遍历title即可
                    // phoneArray[i].title
                    console.log(v);  //等同于下面那行
                    // console.log(v);  == console.log(phoneArray[index]);
                    console.log(v.jobName);

                    console.log(v.jobName.includes(key));
                    // console.log(phoneArray[index].title.includes(key));
                    if (v.jobName.includes(key)) {
                        str += `
                    <li>
                    <div class="job-primary">
                        <div class="info-primary">
                            <div class="info-primary-left  primary-wrapper">
                                <div>
                                    <div class="job-title">
                                        <div class="job-name">
                                            ${v.jobName}
                                        </div>
                                        <div class="job-area">
                                            ${v.city}
                                        </div>
                                    </div>
                                    <div class="job-limit">
                                        <span>${v.money}</span>
                                        <span>
                                            ${v.jobTime}
                                            <em class="vline"></em>
                                            ${v.shoolLevel}
                                        </span>
                                        <div class="info-publis">
                                            <h3 class="name">
                                                <img src="./img/job/chat.png" alt="" class="icon-chat">
                                                ${v.hr}
                                                <em class="vline"></em>
                                                ${v.degree}
                                            </h3>
                                        </div>
                                        <button  id="button-hide">
                                            <img src="./img/job/icon-chat-hover.png" alt="">
                                            <span>立即沟通</span>
                                        </button>
                                    </div>
                                </div>
                            </div>
                            <!-- 上-右 -->
                            <div class="info-primary-right info-company">
                                <div class="company-text">
                                    <h3 class="name"> ${v.companyName}</h3>
                                    <p>
                                        <span> ${v.trade}</span>
                                        <em class="vline"></em>
                                        <span> ${v.level}</span>
                                        <em class="vline"></em>
                                        <span> ${v.people}</span>
                                        <em class="vline"></em>
                                    </p>
                                </div>
                                <div>
                                    <img src="${v.src}" alt="">
                                </div>
                            </div>
                        </div>
                        <div class="info-append">
                            <div class="tags">
                                <span class="tag-item">${v.list1}</span>
                                <span class="tag-item">${v.list2}</span>
                            </div>
                            <div class="info-desc">
                                ${v.weal}
                            </div>
                        </div>
                    </div>
                </li>
                    `
                    }

                })
                $('#main #job-box #job-box-ul').html(str)
            }).fail((err) => {
                console.log(err);
            })

        }











        // 点击X号隐藏
        $('#login h1 span ').click(() => {
            $('#screen').fadeOut(500)
            $('#login').fadeOut(500)
            // 让其可以滚动
            document.documentElement.style.overflow = 'auto'
        })

        // 设置遮罩层的大小
        function getScreenWH() {
            let w = $(window).width() + $(document).scrollLeft()
            let h = $(window).height() + $(document).scrollTop()
            $('#screen').width(w).height(h)
        }
        // 让弹出层和遮罩层居中显示
        function loginCenter() {
            // console.log($(window).height());
            console.log($(document).scrollTop());

            let left = ($(window).width() - $('#login').width()) / 2 + $(document).scrollLeft();
            let top = ($(window).height() - $('#login').height()) / 2 + $(document).scrollTop();

            $('#login').css({
                left: left,
                top: top
                // 在obj 中  左边对象和右边值一样可以省略不写
                // 如下所示
                // left,
                // top
            })

        }
        loginCenter()

        // 监听文档/屏幕大小发生改变
        $(window).resize(() => {
            // 重新调用
            // 设置登录模块居住
            loginCenter()

            // 设置遮罩层居中
            getScreenWH()
        })


    </script>
</body>

</html>